<template>
  <a-layout id="components-layout-demo-top-side-2">
    <a-layout-header class="header" style="background: #fff">
      <div class="logo">
        <a href="">
          <a-icon
            type="star"
            style="color: rgba(0, 0, 0, 0.65); margin-right: 8px"
          />
          <span>WeParty</span>
        </a>
      </div>
      <!-- MY -->
      <a-dropdown class="my">
        <a-menu slot="overlay">
          <a-menu-item key="1">
            <router-link :to="myLink">
              <a-icon type="user" />
              个人中心
            </router-link>
          </a-menu-item>
          <a-menu-item key="2">
            <router-link :to="messageLink">
              <a-icon type="notification" />
              消息中心
            </router-link>
          </a-menu-item>
          <a-menu-item v-if="isAdminister" key="3">
            <router-link to="/admin">
              <a-icon type="smile" />
              管理中心
            </router-link>
          </a-menu-item>
        </a-menu>
        <a-avatar :size="32" icon="user" />
      </a-dropdown>

      <!-- 菜单 -->
      <a-menu
        mode="horizontal"
        :default-selected-keys="[]"
        :style="{ lineHeight: '64px' }"
      >
        <a-menu-item key="1">
          <router-link to="./home">
            <a-icon type="home" theme="filled" />
            主页
          </router-link>
        </a-menu-item>
        <a-menu-item key="2">
          <router-link :to="publishLink">
            <a-icon type="flag" theme="filled" />
            发布活动
          </router-link>
        </a-menu-item>
      </a-menu>
    </a-layout-header>
  </a-layout>
</template>

<script>
console.log("明日香天下第一！");
console.log(`
░░░░░░░░░░░▄▄
░░░░░░░░░░░█░█
░░░░░░░░░░░█░█        Ant
░░░░░░░░░░█░░█        Design
░░░░░░░░░█░░░█        就
███████▄▄█░░░██████▄  是
▓▓▓▓▓▓█░░░░░░░░░░░░█  一
▓▓▓▓▓▓█░░░░░░░░░░░░█  坨
▓▓▓▓▓▓█░░░░░░░░░░░░█  粑
▓▓▓▓▓▓█░░░░░░░░░░░░█  粑
▓▓▓▓▓▓█░░░░░░░░░░░░█  ！
▓▓▓▓▓▓█████░░░░░░░░█  ！
██████▀░░░▀▀██████▀`);

const PERMISSION_ADMIN = 1;

export default {
  name: "WelcomeHeading",
  data() {
    return {
      myLink: sessionStorage.getItem("id") ? "/my" : "/login",
      messageLink: sessionStorage.getItem("id") ? "/message" : "/login",
      isAdminister: sessionStorage.getItem("permission")
        ? PERMISSION_ADMIN in JSON.parse(sessionStorage.getItem("permission"))
        : false,
      collapsed: false,
      publishLink: sessionStorage.getItem("id") ? "/publish" : "/login",
    };
  },
};
</script>

<style lang="less" scope>
.center() {
  align-items: center;
  justify-content: center;
}
#components-layout-demo-top-side-2 {
  .logo {
    width: 120px;
    height: 31px;
    // background: rgba(255, 255, 255, 0.2);
    margin: 16px 28px 16px 0;
    float: left;
    display: flex;
    .center();
    span {
      color: rgba(0, 0, 0, 0.65);
    }
  }
  .my {
    float: right;
    /* 这些数值是计算好的 */
    margin: 16px 48px 16px 0;
  }
}
</style>
